為什麼要用 Composition API？

在 Vue 3 裡，Composition API 就像是把程式邏輯收納到「資料艙」裡，不再零散放在各個 Options（data、methods、computed…）。
優點是：邏輯集中、可重複使用、更好閱讀。

核心功能

1. setup()

• 元件的「起點」。
• 你在這裡定義資料、方法，最後回傳出去給 template 用。
  ⭢就像星艦起飛前，所有裝備都在 setup 裡準備好。

2. ref

• 建立「可響應」的變數。
• .value 存取真實值。
  ⭢像是一個小能源核心，變化會即時影響整個系統。

import { ref } from 'vue'
const fuel = ref(100) // 初始燃料
fuel.value--          // 消耗燃料

3. reactive

• 建立「可響應的物件」。
• 適合多個欄位一起放。
  ⭢像完整的控制面板，每個按鈕都能觸發更新。

import { reactive } from 'vue'
const ship = reactive({
  name: 'Voyager',
  hp: 100,
  shield: true
})

4. computed

• 會根據其他值自動計算，並快取結果。
  ⭢就像雷達自動算出星艦目前的速度，不用每次自己算。

import { computed } from 'vue'
const speed = computed(() => distance.value / time.value)

5. watch

• 監聽資料變化，變了就「觸發動作」。
  ⭢就像天文台發現軌道偏移，立刻發出警報。

import { watch } from 'vue'
watch(fuel, (newVal) => {
  if (newVal < 20) alert('⚠️ 燃料快耗盡！')
})

6. 生命週期 hooks

• 元件在不同階段會執行的事件。
  ⭢好比星艦：啟動、航行、返航，各階段都能插入任務。

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('🚀 星艦啟動')
})
onUnmounted(() => {
  console.log('🛬 星艦返航')
})

結論

• ref → 單一值，響應式。
• reactive → 物件集合，響應式。
• computed → 自動計算。
• watch → 偵測並觸發動作。
• Hooks → 生命週期事件（啟動、銷毀…）。
  ⭢Composition API 就像一個完整的星艦資料艙，把所有控制與監測集中在一起，讓我們更靈活地操縱應用。

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3